<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用jQuery实现文件上传</title>
    <!-- jQuery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <!-- 1、定义ui结构 -->
    <input type="file" name="" id="file">
    <button type="submit" id="btn">上传文件</button>
    <hr>
    <!-- bootstrap进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active"  id="percent"   style="width: 0%;">
          0%
        </div>
    </div>
    <!-- img显示上传成功后的图片 -->
    <img src="" alt="" id="img">

    <script>
        // 绑定事件
        $('#btn').on('click', function(){
            // 2、验证是否有文件
            var fileList = $('#file')[0].files
            if(fileList.length == 0){
                return alert('请先添加上传文件！');
            }
            // console.log(fileList)
            // console.log(fileList[0])

            // 3、向FormData追加文件
            var fd = new FormData();
            fd.append('avatar', fileList[0])


            // console.log($.ajax())
            // 4、上传
            $.ajax({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                // 上传文件
                data: fd,
                // 不修改Content-Type属性  使用FormData默认的Content-Type
                contentType:false,
                // 不对FormData中的数据进行url编码，而是将FormData的数据原样发送到服务器
                processData: false,
                // 进度条
                xhr: function(){
                    var xhr = new XMLHttpRequest();
                    // console.log(xhr);

                    // 监听文件上传进度 事件
                    xhr.upload.addEventListener('progress', function(e){
                        console.log(xhr);
                        if(e.lengthComputable){
                            var progressComplete = Math.ceil((e.loaded / e.total)* 100) + '%';

                            $('#percent').attr('style', 'width:' +  progressComplete).html(progressComplete)
                        }
                    });

                    // 要先return
                    return xhr;

                    // 监听上传完成的事件
                    xhr.onload.onload = function(){
                        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
                    };
                    
                },

                success: function(result){
                    console.log(result);
                    if(result.status !== 200) return alert(result.message);
                    $('#img').attr('src','http://www.liulongbin.top:3006' + result.url).html() 
                }
            })

            

        })
        
    </script>
</body>
</html>